<template>
  <div>
    <div class="titleDiv">
      <h3>柱状图和饼图5</h3>
      <div class="info">
        <el-popover placement="left-start" width="400" trigger="hover">
          <el-table :data="tableData" size="small" stripe>
            <el-table-column label="步骤序号" align="center" width="80">
              <template slot-scope="scope">
                <div>
                  步骤{{scope.$index+1}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="步骤名称" header-align="center" align="center"></el-table-column>
          </el-table>
          <i class="el-icon-info" slot="reference" v-show="tableData.length>0"></i>
        </el-popover>
      </div>
    </div>

    <span>请选择数据数量：</span>
    <el-select v-model="value" placeholder="请选择" @change="setTab">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div class="flex-c" style="width:100%;margin:20px auto">
      <el-table :data="tableData" style="width: 80%" size="small" stripe>
        <el-table-column label="步骤序号" align="center" width="80">
          <template slot-scope="scope">
            <div>
              步骤{{scope.$index+1}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="步骤名称" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="isRun" label="是否结束" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="status" label="步骤状态" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="subTime" label="实例提交时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="startTime" label="实例开始时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="endTime" label="实例结束时间" header-align="center" align="center">
        </el-table-column>
      </el-table>
    </div>

    <div class="box" ref="box"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
      options: [
        {
          value: "1",
          label: "1条数据",
        },
        {
          value: "2",
          label: "2条数据",
        },
        {
          value: "3",
          label: "3条数据",
        },
      ],
      value: "",
      tableData: [],
      tableDataList: [],
      timeLong: "",
      startTime: "",
      endTime: "",
    };
  },
  mounted() {
    let me = this;
    me.tableDataInit();
    // setTimeout(() => {
    //   me.init();
    //   this.$bus.on("resize", (val) => {
    //     this.myChart.resize();
    //   });
    // }, 120);
  },
  methods: {
    indexMethod(index) {
      console.log("index", index);
      return index * 2;
    },
    tableDataInit() {
      let me = this;
      me.tableDataList = [
        {
          name: "synchronous_label_data_count_step",
          isRun: "结束",
          status: "成功",
          subTime: "2022-05-12 09:49:10.000",
          startTime: "2022-05-12 09:49:11.00",
          endTime: "2022-05-12 09:49:14.000",
        },
        {
          name: "DY_TB_TN_00_7fe9df2d4ddb48329e98413de0d37a8b_EPLAT_1e929dad0a3445abba1e4ae7b0d0a42d",
          isRun: "结束",
          status: "成功",
          // subTime: "2022-05-12 09:49:11.000",
          subTime: "2022-05-12 09:49:13.000",
          startTime: "2022-05-12 09:49:12.000",
          endTime: "2022-05-12 09:49:15.000",
        },
        {
          name: "standard_check_field_similarity_dev_test",
          isRun: "结束",
          status: "成功",
          subTime: "2022-05-12 09:49:14.000",
          startTime: "2022-05-12 09:49:15.000",
          endTime: "2022-05-12 09:49:20.000",
        },
      ];
    },
    setTab() {
      let me = this;
      me.tableData = [];
      switch (me.value) {
        case "1":
          me.tableData.push(me.tableDataList[0]);
          break;
        case "2":
          me.tableData.push(me.tableDataList[0]);
          me.tableData.push(me.tableDataList[2]);
          break;
        case "3":
          me.tableData = me.tableDataList;
          break;
      }
      me.echartsDataInit();
      this.$bus.emit("barAndPieData", me.tableData);
    },
    //echartsDataInit 图表数据初始化
    echartsDataInit() {
      let me = this;
      let startTime,
        endTime = 0;
      me.tableData.map((item, index) => {
        let stTime = me
          .$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS")
          .valueOf();
        let edTime = me
          .$moment(item.endTime, "YYYY-MM-DD HH:mm:ss.SSS")
          .valueOf();
        if (index == 0) {
          startTime = stTime;
          endTime = edTime;
        }
        if (index > 0) {
          if (startTime > stTime) {
            startTime = stTime;
          }
          if (endTime < edTime) {
            endTime = edTime;
          }
        }
        me.startTime = startTime;
        me.endTime = endTime;
      });
      let time = me.$moment(endTime).diff(me.$moment(startTime));

      // time = me.getTimeVal(time);
      me.timeLong = time;
      console.log(time);
      me.init();
    },
    getTimeVal(val) {
      let time = "";
      let me = this;
      let hour = me.$moment.utc(val).hour();
      let minute = me.$moment.utc(val).minute();
      let second = me.$moment.utc(val).second();
      let millisecond = me.$moment.utc(val).millisecond();

      hour ? (time += hour + "小时") : "";
      minute ? (time += minute + "分") : "";
      if (second && millisecond) {
        time += second + "." + millisecond + "秒";
      } else if (second && !millisecond) {
        second ? (time += second + "秒") : "";
      } else if (!second && millisecond) {
        time += "0." + millisecond + "秒";
      } else {
        time = val;
      }

      return time;
    },
    init() {
      let me = this;
      if (me.tableData && me.tableData.length == 0) {
        return;
        false;
      }
      let box = this.$refs.box;
      let myChart = this.$echarts.init(box);
      var scale = 1;
      var rich = {
        title: {
          color: "#eee",
          align: "center",
        },
        abg: {
          backgroundColor: "#333",
          width: "100%",
          align: "right",
          height: 25,
          borderRadius: [4, 4, 0, 0],
        },
        weatherHead: {
          width: 40,
          color: "#333",
          height: 24,
          align: "left",
        },
        hr: {
          borderColor: "#777",
          width: "100%",
          borderWidth: 0.5,
          height: 0,
        },
        value: {
          width: 50,
          height: 32,
          color: "#ffc72b",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 18,
        },
        red: {
          width: 50,
          height: 32,
          color: "red",
          padding: [0, 20, 0, 30],
          align: "center",
          fontSize: 20,
        },
        valueHead: {
          color: "#333",
          width: 50,
          height: 24,
          padding: [0, 20, 0, 30],
          align: "center",
        },
        rate: {
          width: 50,
          height: 32,
          fontSize: 18,
          color: "#49dff0",
          align: "right",
          padding: [0, 20, 0, 30],
        },
        rateHead: {
          color: "#333",
          width: 50,
          height: 24,
          align: "center",
          padding: [0, 20, 0, 30],
        },
      };
      let option = {
        color: ["#2D79E9", "#67C23A", "#7FAE90"],
        tooltip: [
          {
            trigger: "axis",
            showContent: true,
            axisPointer: {
              type: "shadow",
            },
            textStyle: { width: 400 },

            formatter: function (params) {
              if (params && params.length > 0) {
                let str = "任务名称XXXXXX" + "</br>";
                for (var i = 0; i < params.length; i++) {
                  let tar = params[i];
                  let name = tar.seriesName;
                  let newName = tar.data.name;
                  let marker = tar.marker;
                  let value = tar.value;

                  if (newName) name = newName + " " + tar.seriesName;
                  if (name) {
                    str +=
                      "<div style='display:flex;justify-content:space-between'><span>" +
                      marker +
                      name +
                      " : </span>" +
                      "<span>" +
                      value +
                      "毫秒</span>" +
                      "</div>";
                  }
                }
                return str;
              }
            },
          },
        ],
        title: {
          text: "任务名称XXXX",
          textStyle: { fontSize: 22 },
          subtext: "总耗时：" + me.getTimeVal(me.timeLong),
          subtextStyle: { fontSize: 16, color: "#999999" },
          x: "center",
        },
        legend: {
          show: true,
          top: 60,
        },
        grid: [
          {
            top: 85,
            width: "90%",
            height: 140,
            // bottom: "75%",
            left: 60,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            boundaryGap: [0, 0.01],
            name: "单位：毫秒",
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["任务耗时"],
            nameGap: 30,
            offset: 20,
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
            },
            axisLabel: {
              // show: false, //不显示坐标轴上的文字
            },
            splitLine: {
              //网格线
              show: false,
            },
          },
        ],
        selectedMode: "single",
        series: [
          {
            name: "任务总耗时",
            type: "bar",
            stack: "Total",
            barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            emphasis: {
              focus: "series",
            },
            color: "#73C0DE",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);

                // return value + "毫秒";
                return time;
              },
              position: "right",
              show: true,
            },
            data: [me.timeLong],
          },
        ],
      };
      option = me.setOption(option);
      myChart.setOption(option, true);
      this.myChart = myChart;
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 2,
        dataIndex: 1,
      });
    },
    setOption(option) {
      let me = this;
      me.tableData.map((item, index) => {
        let startTimeName = "实际提交时间";
        let runTimeName = "步骤运行时间";
        let startTime,
          runTime = 0;
        startTime = me
          .$moment(
            me.$moment(item.startTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          )
          .diff(me.$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf());
        runTime = me
          .$moment(
            me.$moment(item.endTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          )
          .diff(
            me.$moment(item.startTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf()
          );
        // console.log("setOption", startTime);
        // console.log("setOption", runTime);
        let startFlag = false;
        //判断是否是最初开始步骤
        if (item.subTime == me.startTime) {
          startFlag = true;
        }
        //非初始增加等待时间
        if (!startFlag) {
          let chaVal =
            me.$moment(item.subTime, "YYYY-MM-DD HH:mm:ss.SSS").valueOf() -
            me.startTime;
          console.log("chaVal", chaVal);
          option.series.push({
            name: "",
            type: "bar",
            stack: "class" + index,
            data: [chaVal],
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
          });
        }

        let list = [
          { name: startTimeName, time: startTime },
          { name: runTimeName, time: runTime },
        ];
        list.map((item2) => {
          option.series.push({
            name: item2.name,
            type: "bar",
            stack: "class" + index,
            emphasis: {
              focus: "series",
            },
            data: [{ name: "步骤" + (index + 1), value: item2.time }],
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                let time = me.getTimeVal(value);
                return time;
              },
              color: "#333",
              position: "inside",
              show: true,
            },
          });
        });
      });
      return option;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 300px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
.bl {
  display: flex;
  justify-content: space-between;
}
.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.info {
  position: relative;
  /* height: 40px; */
}
.info i {
  /* position: absolute;
  top: -40px;
  right: 100px; */
  font-size: 22px;
  color: #4f8adf;
}
.titleDiv {
  display: flex;
  justify-content: space-between;
  padding: 0 100px 0 30px;
}
</style>
